<template>
	<view class="order">
		<view class="search">
			<u-input
				placeholder="搜索关键词/问题"
				prefixIcon="search"
				v-model="orderName"
			  shape="circle"
				prefixIconStyle="font-size: 22px;color: #909399"
				@change="input"
			></u-input>
		</view>
		<view class="select">
			<view class="picker" @click="toggle('bottom')">
				<view>全部工单</view>
				<u-icon name="arrow-down" size="14"></u-icon>
				<!-- <uni-icons type="down" size="14"></uni-icons> -->
			</view>
		</view>
		<view class="order-list" style="padding-bottom: 100rpx;">
			<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">
				<view class="order-top">
					<view class="top-left">工单编号: {{ item.ident }}</view>
					<view class="top-right" v-if="item.states === 10">待您反馈</view>
					<view class="top-right" v-if="item.states === 12">待您确认</view>
					<view class="top-right" v-if="item.states === 14">已分派</view>
					<view class="top-right" v-if="item.states === 16">正在为您处理</view>
					<view class="top-right" v-if="item.states === 18">待您评价</view>
					<view class="top-right" v-if="item.states === 20">已关闭</view>
				</view>
				<view class="order-line"></view>
				<view class="order-center">
					<view class="center-prev">
						<view class="center-text">问题类型</view>
					</view>
					<view class="center-amount">AI问题</view>
				</view>
				<view class="order-line"></view>
				<view class="order-center1">
					<view class="center-prev">
						<view class="desc">问题描述</view>
					</view>
					<view class="center-amount">
						{{ item.content }}
					</view>
				</view>
				<view class="order-line"></view>
				<view class="order-bottom">
					<view class="time">{{ item.insert_time }}</view>
				</view>
			</view>
			<view style="margin-top: 60rpx;">
				<u-loadmore v-if="orderList.length >= 10" :status="status" line />
			</view>
		</view>
		<view v-show="orderList.length<=0" class="nodata">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" background-color="#fff" border-radius="16rpx 16rpx 0 0">
			<view class="popup-content">
				<view class="order-type">
					<view class="type-text">处理状态</view>
					<view class="type-list">
						<view
							class="type-item"
							v-for="(item,index) in typeList"
							:key="index"
							:class="{ active: tradeType === index }"
							@click="selectState(item, index)"
						>{{ item.text }}</view>
					</view>
				</view>
				<view class="order-type">
					<view class="type-text">问题时间</view>
					<view class="type-list">
						<view
							class="type-item"
							v-for="(item,index) in cashList"
							:key="index"
							:class="{ active: activeIndex === index }"
							@click="selecTime(item, index)"
						>{{ item.text }}</view>
					</view>
				</view>
				<view class="popup-btn">
					<button class="cancle-btn btn" @click="cancleBtn">取消</button>
					<button class="confirm-btn btn" @click="searchList">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getWorkList } from '@/api/wallet.js'
	export default {
		data() {
			return {
				orderList: [],
				orderName: '',
				list: ['选项1', '选项2', '选项3', '选项4'],
				selectedValue: '请选择',
				text: '软件服务',
				msgType: 'success',
				messageText: '这是一条成功提示',
				// typeList: ['全部', '新购', '续费', '降级', '升级', '补偿续费', '退款'],
				// 0未知 1调账 2充值 3退款 4提现 5消费 6订单失效退款 7转账 8新购 9续费 10升级 11降级 12补偿续费
				typeList: [
					{ text: '全部', type: '' }, { text: '已分派', type: 14 }, { text: '待处理', type: 16 },
					{ text: '待反馈', type: 10 }, { text: '待评价', type: 18 }, { text: '已结单', type: 20 },
					{text: ' 待确认', type: 12}
				],
			  // cashList: ['全部', '已支付', '未支付', '作废'],
				cashList: [
					{ text: '全部', state: '' },
					{ text: '近3个月', state: 1 },
					{ text: '近6个月', state: 2 },
					{ text: '近一年', state: 3 },
					// { text: '异常', state: 99 },
				],
				activeIndex: null,
				tradeType: null,
				state: null,
				param: {
					keyword: '',
					states: '',
					time: '',
					page: 1,
					limit: 10,
				},
				status: 'loadmore'
			}
		},
		onShow() {
			console.log('加载完成')
			this.param.page = 1
			this.getListInfo()
		},
		onPullDownRefresh(){
			this.param.page = 1
			this.orderList = []
			this.getListInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		// 触底加载
		onReachBottom() {
			this.status = 'loading'
			console.log('日月日月')
			// this.limit += 10
			this.param.page += 1
			this.getListInfo()
			
		},
		methods: {
			async getListInfo() {
				uni.showLoading({
					title: '正在加载中...'
				})
				const list = await getWorkList(this.param);
				console.log('list', list)
				if(list.data) {
					const { data } = list.data
					this.orderList = this.orderList.concat(data)
					if(this.orderList.length > 0 && data.length <= 0) {
						this.status = 'nomore'
					}
					// this.orderList = data
					uni.hideLoading()
				}
			},
			toggle(type) {
				console.log('type', type, this.$refs.popup)
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			input() {
				console.log('ghfdfghd');
				this.param.keyword = this.orderName;
				this.getListInfo();
			},
			// 时间
			selecTime(item, index) {
				console.log('index', index)
				this.activeIndex = index;
				this.param.time = item.state;
			},
			// 状态
			selectState(item, index) {
				this.tradeType = index;
				this.param.states = item.type;
			},
			searchList() {
				this.cancleBtn()
				this.getListInfo();
			},
			cancleBtn() {
				this.$refs.popup.close();
			},
			goDetail(item) {
				console.log('item', item)
				// const param = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/serviceBack/orderSupport/recordDetail?param=${item.workid}&time=${item.insert_time}&state=${item.states}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		margin: 20rpx 36rpx;
	}
	.select {
		margin-top: 60rpx;
		font-size: #{$text-size};
		.picker {
			margin-right: 12rpx;
			display: flex;
			align-items: center;
		}
	}
	.order-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 10rpx 32rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		.order-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			line-height: 36rpx;
			.top-left {
				font-size: 24rpx;
				color: #999;
			}
			.top-right {
				font-size: 28rpx;
				color: #ff6005;
			}
		}
		.order-center1 {
			display: flex;
			justify-content: space-between;
			max-height: 240rpx;
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 0;
			.desc {
				width: 140rpx;
				margin-right: 20rpx;
			}
			.center-amount {
				color: #{$sub-color};
			}
			.center-prev {
				display: flex;
				// align-items: center;
			}
		}
		
		.order-center {
		  height: 80rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 32rpx;
		  color: #333;
			.center-amount {
				color: #{$sub-color};
			}
			.center-prev {
				display: flex;
				align-items: center;
				.center-text {
				}
				.desc {
					width: 140rpx;
					margin-right: 20rpx;
				}
				.center-btn {
					margin-left: 20rpx;
					background: #333;
					color: #fff;
					border-radius: 20rpx;
					font-size: 20rpx;
					padding: 2rpx 16rpx;
					text-align: center;
					box-sizing: border-box;
				}
			}
		}
		.order-bottom {
			// margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
			min-height: 80rpx;
			max-height: 120rpx;
			.time {
				float: right;
				// margin-left: 60%;
				line-height: 80rpx;
			}
		}
		.order-line {
			border-bottom: 1px solid #f5f5f5;
		}
	}
	.popup-content {
		padding: 15px;
		height:100%;
		background-color: #fff;
		border-radius: 20rpx;
		.order-type {
			.type-text {
				font-size: #{$text-size};
			}
			.type-list {
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;
				margin-bottom: 50rpx;
			}
			.type-item {
				border: 1px solid #e2ebe2;
				border-radius: 50rpx;
				// padding: 10rpx 20rpx;
				padding: 18rpx 40rpx;
				text-align: center;
				color: #666;
				margin: 20rpx 10rpx 0 10rpx;
				font-size: 28rpx;
			}
			// .type-item:last-child:not(.item:nth-child(5n)) {
			//   margin-right: 0;
			// }
		}
		.popup-btn {
				width: 70%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				margin-top: 120rpx;
		
				.btn {
					width: 200rpx;
					height: 70rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 70rpx;
				}
		
				.cancle-btn {
					color: #{$main-color};
					border: 1px solid #{$main-color};
				}
		
				.confirm-btn {
					color: #fff;
					background-color: #{$main-color};
				}
			}
		}
		// .popup-btn {
		// 	display: flex;
		// 	margin-top: 40rpx;
		// 	.confirm-btn {
		// 		border-radius: 30rpx;
		// 		background: #ff6005;
		// 		color: #fff;
		// 		font-size: 32rpx;
		// 		height: 60rpx;
		// 		line-height: 60rpx;
		// 	}
		// 	.cancle-btn {
		// 		border-radius: 30rpx;
		// 		background: #fff;
		// 		color: #ff6005;
		// 		font-size: 32rpx;
		// 		border: 1px solid #ff6005;
		// 		height: 60rpx;
		// 		line-height: 60rpx;
		// 	}
		// }
	// }
	::v-deep .is-input-border {
		border-radius: 20px;
		font-size: #{$text-size}
	}
	.active {
		background: #fff !important;
		color: #ff6005 !important;
		border: 1px solid #ff6005 !important;
	}
	::v-deep .u-input--circle{
		background: #fff;
	}
</style>